<template>
  <div style="width: 100%; " >
    <div ref="lineChart" style="width: calc(90vw); height: calc(60vw);margin-left: -5vw; "></div>
  </div>
</template>


<script setup lang="ts">
import { ref } from "vue";
import { onMounted,watch,nextTick } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  titleData: {
    type: Array,
    default: false,
  },
  titleTest: {
    dataS: Array,
    default: false,
  },
});
const lineChart = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value

onMounted(() => {
  // console.log('ref',lineChart.value)
  init();
});
watch(props.titleData, (val, oldVal) => { 
  if (props.titleData.length != 0) {
    nextTick(() => {
      init()
    })
    
  } 
}, {deep:true})
function init() {
  // 基于准备好的dom，初始化echarts实例
  const chart = echarts.init(lineChart.value);
  const yearData = props.titleData.map(item => item.year);
  const premiumPayable = props.titleData.map(item => item.premiumPayable);

  // 指定图表的配置项和数据
  const option = {
    grid: {
      left: '17%'
    },
    tooltip: {
            trigger: 'axis', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            textStyle: {
                fontSize: 12 // 设置字体大小
            },
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
            showContent:true,
            triggerOn:'click',
            enterable:true,                     // 鼠标是否可以进入提示框浮层中
            borderWidth:3,
            position: function (point, params, dom, rect, size) {
                let x = point[0] - 10; // x 轴偏移量为 10
                let y = point[1] + 10; // y 轴偏移量为 10
                if (x + dom.offsetWidth > size.viewSize[0]) {
                x = size.viewSize[0] - dom.offsetWidth;
                }
                if (y + dom.offsetHeight > size.viewSize[1]) {
                y = size.viewSize[1] - dom.offsetHeight;
                }
                return [x, y];
            },
        },
    dataZoom: [
      {
        //Y轴固定,让内容滚动
        type: "slider",
        show: false,
        xAxisIndex: [0],
        start: 1,
        end: 80, //设置X轴刻度之间的间隔(根据数据量来调整)
        zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
      },
      {
        type: "inside",
        xAxisIndex: [0],
        start: 1,
        end: 80,
        zoomLock: true, //锁定区域禁止缩放
      },
    ],

    xAxis: {
      type: "category",
      data: yearData,
      axisLabel: {
        textStyle: {
          fontSize:10
        }
      }
    },
    yAxis: {
      type: "value",
       axisLabel: {
        textStyle: {
          fontSize:10
        }
      }
    },
    legend: {
          data: premiumPayable,
          left: 50,
          top: 300,
        },
    series: [
      {
        data: premiumPayable,
        type: "line",
        label: {
          show: false,
          formatter: '{c}', // 例如只显示数值，不显示其他文本
          fontSize: 9, // 减小字体大小
        },
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  chart.setOption(option);
}
</script>

<style lang="less" scoped>

</style>
  
  